<template>
  <div>
    <div>
      <el-card style="margin-bottom: 10px">
        <div
          style="
          display: flex;
          flex-direction: row;
          justify-content: space-between;
        "
        >
          <div>
            <div class="verticalBar"></div>
            <span style="color: #1074fd">图片管理</span>
          </div>
        </div>
      </el-card>
    </div>
    <div>
      <el-card>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="简介名称">
            <el-input placeholder="请输入" v-model="filterCondition.name"></el-input>
          </el-form-item>
          <el-form-item label="状态" label-width="100px">
            <el-select v-model="filterCondition.status" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-date-picker
            v-model="filterCondition.time"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            class="ml-16"
          >
          </el-date-picker>
        </el-form>
        <el-button type="primary" @click="promptBoxShow">上传图片</el-button>
        <el-button class="ml-96" type="primary" @click="filterImg">查询</el-button>
        <el-button class="" type="info">清空条件</el-button>
      </el-card>
    </div>
    <div class="mt-2">
      <el-card>
        <el-table
          :data="tableData.slice((currentPage-1)*pagesize,currentPage*pagesize)"
          border
          stripe
          style="width: 100%">
          <el-table-column
            prop="id"
            label="ID"
            width="180">
          </el-table-column>
          <el-table-column
            prop="name"
            label="图片名称"
            width="180">
          </el-table-column>
          <el-table-column
            prop="createTime"
            label="上传时间">
          </el-table-column>

          <el-table-column
            prop="operations"
            label="操作"
            width="300">
            <template slot-scope="scope">
              <div class="text-center">
                <el-button type="primary" size="mini" @click="showImgM(scope)">查看</el-button>
                <el-button type="danger" size="mini" @click="delImg(scope)">删除</el-button>
              </div>
            </template>
          </el-table-column>
        </el-table>
        <div class="text-center mt-2">
          <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pagesize"
            @current-change="current_change">
          </el-pagination>
        </div>
      </el-card>
    </div>
    <el-dialog
      :visible.sync="promptBox"
      width="30%"
      style="width: 2000px"
    >
      <div>
        <el-card style="margin-bottom: 10px">
          <div
            style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
          >
            <div>
              <div class="verticalBar"></div>
              <span style="color: #1074fd">图片上传</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="middle_div">
        <span>图片名称：</span>
        <el-input v-model="imgName" placeholder="请输入内容" style="width: 400px"></el-input>
        <el-upload :action="uploadUrl" :on-success="uploadImgSuccess">
          <el-button size="small" type="primary">选择文件</el-button>
        </el-upload>
        <div>
          <span>是否启用：</span>
          <template>
            <el-radio v-model="radio" label="1">是</el-radio>
            <el-radio v-model="radio" label="0">否</el-radio>
          </template>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="promptBoxShow">取 消</el-button>
        <el-button type="primary" @click="promptBoxShow();uploadImgInfo()"
        >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-dialog
      :visible.sync="ImgBox"
      width="40%"
      style="width: 2000px"
      class="rounded"
    >
      <div>
        <el-card style="margin-bottom: 10px">
          <div
            style="
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          "
          >
            <div>
              <div class="verticalBar"></div>
              <span style="color: #1074fd">图片查看</span>
            </div>
          </div>
        </el-card>
      </div>
      <div class="middle_div ml-10">
        <div class="space-y-0.5 ml-10 jj">
          <!-- <span>图片</span> -->
          <img :src="showImgSrc" alt="">
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import video from '@/network/api/video'

export default {
  data () {
    return {
      options: [
        {
          value: '选项1',
          label: '合成中',
        },
        {
          value: '选项2',
          label: '已合成',
        },
        {
          value: '选项3',
          label: '合成失败',
        },
      ],
      imgName: '',
      promptBox: false,
      ImgBox: false,
      showImgSrc: '',
      radio: '0',
      filterCondition: {
        status: '',
        time: '',
        name: '',
      },
      pagesize: 10,
      imgSrc: '',
      currentPage: 1,
      total: 0,
      // uploadUrl: 'http://192.168.1.6:9020/qk/upload/app',
      uploadUrl: 'http://tmp.qk-api.aike.info/qk/upload/app',
      tableData: [],
    }
  },
  methods: {
    uploadImgSuccess (res, file) {
      this.imgSrc = res.data
    },
    promptBoxShow () {
      this.promptBox = !this.promptBox
    },
    current_change (currentPage) {
      this.currentPage = currentPage
    },
    uploadImgInfo () {
      const info = JSON.parse(localStorage.getItem('updateUserInfo'))
      const data = {
        organId: info.organId + '',
        name: this.imgName,
        url: this.imgSrc,
        enabled: this.radio,
      }
      video.uploadImg(data).then(res => {
        console.log(res)
      })
      location.reload()
    },
    queryImg () {
      const info = JSON.parse(localStorage.getItem('updateUserInfo'))
      const data = {
        organId: info.organId + '',
        name: '',
        enabled: '',
        startTime: '',
        endTime: '',
        pageSize: 100,
        pageNum: 1,
      }
      video.queryImg(data).then(res => {
        this.total = res.data.data.records.length
        res.data.data.records.forEach(item => {
          this.tableData.unshift(item)
        })
      })
    },
    filterImg () {
      const info = JSON.parse(localStorage.getItem('updateUserInfo'))
      const data = {
        organId: info.organId + '',
        name: this.filterCondition.name,
        enabled: this.filterCondition.status,
        startTime: '',
        endTime: '',
        pageSize: 100,
        pageNum: 1,
      }
      video.queryImg(data).then(res => {
        this.tableData = []
        res.data.data.records.forEach(item => {
          this.tableData.unshift(item)
        })
      })
    },
    delImg (scope) {
      const data = {
        id: scope.row.id,
        deleted: '1',
      }
      video.delImg(data).then(
        res => {
          console.log(res)
        },
      )
    },
    showImgM (scope) {
      this.ImgBox = true
      this.showImgSrc = scope.row.url
    },
  },
  mounted () {
    this.queryImg()
  },
}
</script>

<style scoped>
.verticalBar {
  width: 3px;
  height: 18px;
  background: #1074fd;
  display: inline-block;
  vertical-align: top;
  margin-right: 10px;
  margin-top: 2px;
}

/deep/ .el-date-editor .el-range-separator {
  padding: 0;
}

.ml-96 {
  margin-left: 48rem;
}

.add_div {
  color: #1074fd;
  font-size: 30px;
}

.option_div {
  margin-right: 40px;
  margin-left: 40px;
}

.option_div:nth-child(1) {
  margin-left: 0;
}

.el-button_div {
  margin-left: 16rem;
}

.container {
  display: flex;
}

.container:nth-child(2) {
  margin-top: 40px;
}

.el-container_div {
  border: 1px solid rgb(161, 160, 160);
  border-radius: 7px;
}

.el-container_div {
  margin-left: 7rem;
  width: 400px;
}

.el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

.middle_div {
  padding: 10px 40px 40px 40px;
}

.middle_div div {
  margin-top: 20px;
}

.middle_div span {
  font-weight: 500;
  color: rgb(16, 16, 16);
}

/deep/ .el-textarea__inner {
  height: 160px !important;
}

.el-icon-sort {
  margin-left: 20px;
  margin-right: 20px;
  transform: rotate(90deg);
}

/deep/ .el-dialog__header {
  background-color: white;
  padding: 0;
}

/deep/ .el-dialog__body {
  padding: 0;
}

/deep/ .el-card__body {
  padding: 13px;
}

.ml-10 {
  margin-left: 0rem;
}

.jj {
  text-align: center;
  /* display: inline; */
}

.jj img{
  /* text-align: center; */
  display: inline-block;
}
</style>

